<template>
  <div class="dashboard-root">
    <!-- 数据总览卡片区 -->
    <el-row :gutter="24" class="overview-row">
      <el-col :span="6" v-for="card in overviewCards" :key="card.title">
        <el-card shadow="hover" class="overview-card">
          <div class="card-header">
            <el-icon :size="32" :style="{color: card.color}">
              <component :is="card.icon" />
            </el-icon>
            <div class="card-title">{{ card.title }}</div>
          </div>
          <div class="card-value">{{ card.value }}</div>
          <div class="card-footer">
            <span :style="{color: card.trend > 0 ? '#67C23A' : '#F56C6C'}">
              <i :class="card.trend > 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" />
              {{ Math.abs(card.trend) }}%
            </span>
            <span class="card-footer-label">{{ card.trend > 0 ? '较昨日增长' : '较昨日下降' }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 只保留欢迎消息提示（可关闭） -->
    <div v-if="showWelcome" class="welcome-toast">
      <span>{{ welcomeMsg }}</span>
      <button class="close-btn" @click="closeWelcome">×</button>
    </div>

    <!-- 快捷入口区 -->
    <el-row :gutter="24" class="quick-row">
      <el-col :span="3" v-for="entry in quickEntries" :key="entry.title">
        <el-card shadow="hover" class="quick-card" @click="go(entry.path)">
          <el-icon :size="28" :style="{color: entry.color}">
            <component :is="entry.icon" />
          </el-icon>
          <div class="quick-title">{{ entry.title }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 访问趋势图表区 -->
    <el-card class="chart-card">
      <div class="chart-title">访问&销售趋势</div>
      <v-chart :option="chartOption" autoresize style="height:320px;" />
    </el-card>

    <!-- 下方内容区块 -->
    <el-row :gutter="24" class="bottom-row">
      <!-- 4个小卡片 -->
      <el-col :span="6">
        <el-card class="mini-card">
          <div class="mini-title">活跃用户</div>
          <div class="mini-value">3,215</div>
          <div class="mini-desc">较昨日 +3.2%</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="mini-card">
          <div class="mini-title">转化率</div>
          <div class="mini-value">12.8%</div>
          <div class="mini-desc">较昨日 +0.5%</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="mini-card">
          <div class="mini-title">退款率</div>
          <div class="mini-value">1.2%</div>
          <div class="mini-desc">较昨日 -0.1%</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="mini-card">
          <div class="mini-title">在线人数</div>
          <div class="mini-value">128</div>
          <div class="mini-desc">实时统计</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="bottom-row2">
      <!-- 公告/待办事项区块 -->
      <el-col :span="12">
        <el-card class="notice-card">
          <div class="notice-title">系统公告 & 待办事项</div>
          <ul class="notice-list">
            <li>【公告】7月10日系统将升级维护，请提前保存数据。</li>
            <li>【待办】有3条新订单待处理。</li>
            <li>【提醒】本月销售目标已完成85%。</li>
            <li>【消息】有2条新用户反馈待查看。</li>
          </ul>
        </el-card>
      </el-col>
      <!-- 订单状态分布饼图 -->
      <el-col :span="12">
        <el-card class="pie-card">
          <div class="pie-title">订单状态分布</div>
          <v-chart :option="pieOption" autoresize style="height:220px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { User, ShoppingCart, Message, Money, DataAnalysis, Goods, Document, Setting, PieChart, TrendCharts, Notebook, Edit, Menu, Lock } from '@element-plus/icons-vue'
import VChart from 'vue-echarts'

const router = useRouter()

// 数据总览卡片区数据
const overviewCards = [
  { title: '访问量', value: '25,312', trend: 24, icon: DataAnalysis, color: '#409EFF' },
  { title: '销售额', value: '￥9,762', trend: 15, icon: Money, color: '#67C23A' },
  { title: '订单量', value: '21,172', trend: -8, icon: ShoppingCart, color: '#E6A23C' },
  { title: '成交额', value: '￥7,194', trend: 10, icon: PieChart, color: '#F56C6C' }
]

// 只保留欢迎消息提示相关
const username = ref(localStorage.getItem('username') || '用户')
const showWelcome = ref(false)
const welcomeMsg = ref('')
function showWelcomeMessage(username) {
  const hour = new Date().getHours()
  let message = ''
  if (hour < 6) message = `夜深了，${username}，请注意休息！`
  else if (hour < 12) message = `早上好，${username}！祝您今天工作愉快！`
  else if (hour < 18) message = `下午好，${username}！继续加油！`
  else if (hour < 22) message = `晚上好，${username}！今天辛苦了！`
  else message = `夜深了，${username}，请注意休息！`
  welcomeMsg.value = message
  showWelcome.value = true
  // 自动消失
  setTimeout(() => { showWelcome.value = false }, 3000)
}
function closeWelcome() {
  showWelcome.value = false
}

onMounted(() => {
  // 只在登录后第一次进入仪表盘时弹出
  if (localStorage.getItem('justLoggedIn') === 'true') {
    showWelcomeMessage(username.value)
    localStorage.removeItem('justLoggedIn')
  }
})

function go(path) {
  if (path) router.push(path)
}

const quickEntries = [
  { title: '用户', icon: User, color: '#409EFF', path: '/user' },
  { title: '分析', icon: DataAnalysis, color: '#67C23A', path: '/dashboard' },
  { title: '商品', icon: Goods, color: '#E6A23C', path: '/settings' },
  { title: '订单', icon: ShoppingCart, color: '#F56C6C', path: '/settings' },
  { title: '消息', icon: Message, color: '#909399', path: '/settings' },
  { title: '标签', icon: Notebook, color: '#409EFF', path: '/settings' },
  { title: '配置', icon: Setting, color: '#67C23A', path: '/settings' },
  { title: '权限', icon: Lock, color: '#E6A23C', path: '/permission' }
]

const chartOption = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['访问量', '销售额'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', boundaryGap: false, data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] },
  yAxis: { type: 'value' },
  series: [
    {
      name: '访问量',
      type: 'line',
      smooth: true,
      data: [12000, 14000, 10000, 18000, 15000, 17000, 16000],
      areaStyle: { color: 'rgba(64,158,255,0.15)' },
      lineStyle: { color: '#409EFF' },
      symbol: 'circle',
      symbolSize: 8
    },
    {
      name: '销售额',
      type: 'line',
      smooth: true,
      data: [9000, 11000, 8000, 15000, 12000, 14000, 13000],
      areaStyle: { color: 'rgba(245,108,108,0.10)' },
      lineStyle: { color: '#F56C6C' },
      symbol: 'circle',
      symbolSize: 8
    }
  ]
})

const pieOption = ref({
  tooltip: { trigger: 'item' },
  legend: { top: '10%', left: 'center' },
  color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'],
  series: [
    {
      name: '订单状态',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: { show: false, position: 'center' },
      emphasis: {
        label: { show: true, fontSize: 18, fontWeight: 'bold' }
      },
      labelLine: { show: false },
      data: [
        { value: 1048, name: '已完成' },
        { value: 735, name: '待发货' },
        { value: 580, name: '退款中' },
        { value: 484, name: '已取消' }
      ]
    }
  ]
})
</script>

<style scoped>
.dashboard-root {
  padding: 0 0 24px 0;
}

/* 数据总览卡片区样式 */
.overview-row {
  margin-bottom: 24px;
}
.overview-card {
  border-radius: 16px;
  min-height: 120px;
  transition: box-shadow 0.2s;
  cursor: pointer;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #666;
}
.card-value {
  font-size: 32px;
  font-weight: bold;
  color: #222;
  margin-bottom: 8px;
}
.card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #999;
}
.card-footer-label {
  margin-left: 4px;
}

/* 欢迎消息提示样式 */
.welcome-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  background: #67c23a;
  color: #fff;
  padding: 16px 32px 16px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  animation: slideIn 0.3s;
}
.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  margin-left: 16px;
  cursor: pointer;
  line-height: 1;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(100%);}
  to { opacity: 1; transform: translateX(0);}
}

/* 其它区块样式保留 */
.quick-row {
  margin-bottom: 24px;
}
.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  min-height: 90px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  text-align: center;
}
.quick-card:hover {
  box-shadow: 0 4px 16px rgba(64,158,255,0.10);
  transform: translateY(-2px) scale(1.03);
}
.quick-title {
  margin-top: 8px;
  font-size: 15px;
  color: #555;
}
.chart-card {
  border-radius: 16px;
  margin-top: 8px;
  padding: 16px 24px 8px 24px;
}
.chart-title {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
}
.bottom-row {
  margin-top: 24px;
  margin-bottom: 0;
}
.mini-card {
  border-radius: 12px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 20px 12px 20px;
  background: #f8faff;
  box-shadow: 0 2px 8px rgba(64,158,255,0.04);
}
.mini-title {
  font-size: 14px;
  color: #888;
  margin-bottom: 4px;
}
.mini-value {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  margin-bottom: 2px;
}
.mini-desc {
  font-size: 12px;
  color: #67C23A;
}
.bottom-row2 {
  margin-top: 18px;
}
.notice-card {
  border-radius: 12px;
  min-height: 220px;
  padding: 18px 24px 12px 24px;
  background: #fff;
}
.notice-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}
.notice-list {
  padding-left: 18px;
  color: #666;
  font-size: 14px;
  line-height: 2;
}
.pie-card {
  border-radius: 12px;
  min-height: 220px;
  padding: 18px 24px 12px 24px;
  background: #fff;
}
.pie-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}
</style>
